<template>
  <div class="group_detail">
    <header>
      <span class="logo">
        <img src="../img/2.gif" alt />
      </span>
      <span>团购详情</span>
      <span class="return" @click="back()">
        <van-icon name="arrow-left" />
      </span>
    </header>
    <div class="group_menu">
      <dl>
        <dt>
          <img :src="info.url" alt />
        </dt>
        <dd>
          <p>{{info.name}}</p>
          <p>{{info.site}}</p>
          <p>
            活动时间:{{info.time}}
            <span>已报名:5人</span>
          </p>
        </dd>
      </dl>
      <h3>团购介绍</h3>
      <p id="p1">团购介绍团购介绍团购介绍团购介绍团购介绍团购介绍团购介绍团购介绍团购介绍团购介绍团购介绍团购介绍团购介绍团购介绍</p>
      <div class="s">
        <div class="sum">
          <img src="https://tse1-mm.cn.bing.net/th/id/R-C.d7846ebe1f881f5c97bd8ac2d6b45788?rik=WyuFGg0kQKib3w&riu=http%3a%2f%2ftupian.qqw21.com%2farticle%2fUploadPic%2f2018-4%2f201841922423846502.jpg&ehk=0KA2GAQBll73pXuyLtKmycujYX915bTedaubL5iBRWU%3d&risl=&pid=ImgRaw&r=0" alt />
          <div class="sums">
            <p>唐伯虎</p>
            <p>
              133****0984
              <span>
                <van-icon name="chat" />&emsp;
                <van-icon name="phone" />
              </span>
            </p>
          </div>
        </div>
        <div class="sum">
          <img src="https://www.keaidian.com/uploads/allimg/190704/04112049_4.jpeg" alt />
          <div class="sums">
            <p>拾柒</p>
            <p>
              159****6261
              <span>
                <van-icon name="chat" />&emsp;
                <van-icon name="phone" />
              </span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      info: [],
      id: ""
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.getDetail();
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    getDetail() {
      axios({
        url: "/api/abulkDetail",
        method: "post",
        data: { id: this.id }
      }).then(res => {
        this.info = res.data.data;
      });
    }
  }
};
</script>

<style>
.group_detail {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
 header {
  width: 100%;
  height: 60px;
  background-color: #2997fb;
  text-align: center;
  line-height: 60px;
}

 header span {
  color: white;
  float: right;
  margin-right: 60px;
  /* vertical-align: middle; */
  font-size: 18px;
}

 header .logo {
  float: right;
  margin-right: 10px;
}

 header .return {
  float: left;
  margin-left: 30px;
  vertical-align: middle;
  margin-top: 3px;
}

.group_menu {
  flex: 1;
  overflow-y: auto;
}
.group_menu dl {
  width: 95%;
  height: 310px;
}
.group_menu dl dt img {
  width: 100%;
  height: 200px;
  margin-left: 10px;
  margin-top: 10px;
}
.group_menu dl dd {
  padding-top: 10px;
  padding-left: 10px;
  line-height: 10px;
}
.group_menu dl dd p:nth-of-type(1) {
  font-weight: bold;
  font-size: 18px;
  padding-top: 5px;
}
.group_menu dl dd p:nth-of-type(2) {
  font-size: 17px;
  color: rgb(34, 34, 34);
  padding-top: 5px;
}
.group_menu dl dd p:nth-of-type(3) {
  font-size: 17px;
  color: rgb(34, 34, 34);
  padding-top: 5px;
  font-size: 14px;
}
.group_menu dl dd p:nth-of-type(3) span {
  padding-left: 70px;
  color: rgb(34, 34, 34);
}
.group_menu h3 {
  font-weight: bold;
  padding-left: 10px;
  font-size: 18px;
}
#p1 {
  padding-left: 10px;
  font-size: 17px;
  color: rgb(131, 131, 131);
}
.sum {
  display: flex;
  margin-top: 10px;
}
.sum img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-left: 10px;
}
.sum p {
  font-weight: bold;
  line-height: 10px;
  padding-left: 10px;
}
.sum p:nth-of-type(1) {
  padding-top: 10px;
}
.sum i {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: rgb(252, 224, 235);
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  font-size: 20px;
  color: rgb(255, 128, 166);
  margin-top: -20px;
}
.sum span {
  padding-left: 130px;
}
</style>